let path = require("path");
// 使用模块化语法描述webpack配置;

let HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
let MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    // 入口文件配置; 
    entry : {
        // 我们在配置入口的时候，去编写一个对象对象存在key,value两部分数据; 
        // key 数据我们也叫做 chunk 数据 !, 是这个入口的标记! 我们在html-webpack-plugin插件之中使用! 
        "index"  : "./src/index/entry.js",
        "detail" : "./src/detail/entry.js"
    },
    // 打包模式配置;
    mode : "development",
    // 创建一个map文件, 说明我们每个代码的源码位置, 方便我们在调试过程之中对代码进行修改; 
    devtool : "source-map",
    // 代码出口部分 ;
    output : {
        // 配置输出文件的路径，这个文件输出路径必须是绝对路径
        path : path.resolve( __dirname , "dist"),
        // 配置输出文件的名称; 
        // 多入口的配置我们在输出js名称的时候可以使用指令命名! 
        filename : "javascript/[name].js"
    },
    // 配置loader : 
    // 其实这个配置信息就是告诉 webpack 用什么工具处理什么后缀名的文件; 
    // 我们在使用loader之前必须要先下载loader , loader的下载指令是 : 
    // npm i -D style-loader css-loader
    // 注意 : 我们在use之中使用了什么loader就需要下载什么loader ， 一个都不能少! 
    // 在项目之中已经安装过的loader则不需要重复下载!
    module : {
        // 这个就是我们需要配置的loader使用规则; 
        rules : [
            // 一个对象就是一个加载规则; 
            {   
                // 这个text字段是告知我们的webpack在什么条件下调用后方的loader;
                test : /\.css$/,
                // 配置使用的loader
                // 数组里面就是我们符合规则的情况下使用的loader; 
                // 这个loader的调用的顺序是从后到前调用的; 
                // [ a , b , c ] 
                // 我么处理文件时调用loader的顺序是 c , b , a 
                use : [
                    // 把可以被js兼容的css文件放到html head标签的style之中! 
                    MiniCssExtractPlugin.loader,
                    // css-loader是识别css文件，并让css文件变成可以被js兼容的模式;
                    "css-loader"
                ]
            },
            // 配置scss后缀识别; 
            {
                test : /\.scss$/,
                // 对应的loader配置查询文档，查询百度; 
                // 执行指令 : npm i -D sass-loader sass 
                use : [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ]
            },
        ]
    },
    // plugins 配置插件的地方,我们把插件引入之后放在这个数组之中进行使用! 
    plugins : [
        // 配置css抽离插件
        new MiniCssExtractPlugin({
            // 配置css文件存放的路径
            filename : "css/[name].css"
        }),
        // 配置清除dist文件插件
        new CleanWebpackPlugin(),
        // new HtmlWebpackPlugin 这个插件会直接创建一个html文件，这个文件我们修改的方式可以依靠传入参数进行修改，但是这样的修改方式太麻烦了，而且我们的html之中的结构有很多，我们不可能把这些结构写在配置文件之中; 
        // 我们应该创建一个html模板! 我们在配置文件之中说明模板位置之后，插件会根据模板生成html结构，并把我们的依赖进行引入。 
        // 我们的模板通常是放在 src 之中的! 

        // 在多入口配置之中我们有多少入口就创建多少个html页面; 
        // 我们可以配置插件的引入代码; 
        new HtmlWebpackPlugin({
            // 如果使用了 template选项则title属性不生效
            // title : "苏宁易购-官方网站",
            template : "./src/index/index.html",
            // 我们可以通过配置 inject 属性来决定依赖文件在哪里引入; 
            inject : "body",
            // 我们通过入口编译好的代码; 
            // 表示引入的代码名称 
            // chunks名称就是我们在定义入口时对象的key值! 
            chunks : ["index"],
            filename : "index.html"
        }) ,
        new HtmlWebpackPlugin({
            // 如果使用了 template选项则title属性不生效
            // title : "苏宁易购-官方网站",
            template : "./src/detail/detail.html",
            // 我们可以通过配置 inject 属性来决定依赖文件在哪里引入; 
            inject : "body",
            chunks : ["detail"],
            filename : "detail.html"
        }) 
    ],
    // 配置dev-server服务器
    devServer : {
        // 前端测试服务器端口，不要我们接口服务器端口重合! 
        port : 9000 ,
        // 是否启动热刷新功能! 
        hot : true ,
        static : "public"
    }
}